<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>spu列表</title>
</head>
<body>
	<div>
		<form id="searchForm" class="form-inline">

			<div class="form-group mx-sm-3 mb-2">
				<label for="inputPassword2" class="sr-only">Password</label> <input
					name="goodsName" value="${vo.goodsName }" type="text"
					class="form-control" id="inputPassword2" placeholder="名称">
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<label for="inputPassword3" class="sr-only">Password</label> <input
					name="caption" value="${vo.caption }" type="text"
					class="form-control" id="inputPassword3" placeholder="标题">
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<label for="exampleFormControlSelect1">品牌</label> <select
					name="brandId" class="form-control" id="exampleFormControlSelect1">
					<option value="0">请选择</option>
					<c:forEach items="${brands }" var="b">
						<option value="${b.id}" ${b.id==vo.brandId?'selected':''  }>${b.name }</option>
					</c:forEach>

				</select>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<label for="exampleFormControlSelect1">排序数据项</label> <select
					name="orderField" class="form-control"
					id="exampleFormControlSelect1">

					<option value="goods_name"
						${vo.orderField=="goods_name"?"selected":"" }>名称</option>
					<option value="caption" ${vo.orderField=="caption"?"selected":"" }>标题</option>
					<option value="category_id"
						${vo.orderField=="category_id"?"selected":"" }>品牌</option>
					<option value="brand_id"
						${vo.orderField=="brand_id"?"selected":"" }>分类</option>
					<option value="is_marketable"
						${vo.orderField=="is_marketable"?"selected":"" }>是否上架</option>

				</select>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<label for="exampleFormControlSelect1">排序方式</label> <select
					name="orderType" class="form-control"
					id="exampleFormControlSelect1">
					<option value="ASC" ${vo.orderType=="ASC"?"selected":"" }>升序</option>
					<option value="DESC" ${vo.orderType=="DESC"?"selected":"" }>降序</option>
				</select>
			</div>

			<button type="button" class="btn btn-primary mb-2"
				" onclick="search()">查询</button>
		</form>
	</div>

	<div class="btn-group" role="group" aria-label="Basic example">
		<button type="button" class="btn btn-secondary" onclick="delBatch()">批量删除</button>
		<button type="button" class="btn btn-secondary" onclick="toAdd()">添加</button>
	</div>
	<table class="table">
		<tr>
			<th>id</th>
			<th>名称</th>
			<th>图片</th>
			<th>品牌</th>
			<th>分类</th>
			<th>上架</th>
			<th>标题</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${info.list }" var="spu">

			<tr>
				<td>${spu.id}
					<input type="checkbox" value="${spu.id }" class="cho">
				</td>
				<td>${spu.goodsName}</td>
				<td><img src="/img/${spu.smallPic}" width="50px" height="50px"></img></td>
				<td>${spu.brand.name}</td>
				<td>${spu.category.name}</td>
				<td>${spu.isMarketable==1?"上架":"下架"}</td>
				<td>${spu.caption}</td>
				<td>
					<button type="button" class="btn btn-outline-primary" onclick="toUpdate(${spu.id})">修改</button>
					<button type="button" class="btn btn-outline-secondary" onclick="del(${spu.id})">删除</button>
					<button type="button" class="btn btn-outline-success" onclick="addSku(${spu.id})">添加Sku</button>
				</td>

			</tr>
		</c:forEach>
	</table>
	<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
</body>
<script type="text/javascript">
	function addSku(spuId){
		$("#workArea").load("./sku/toAdd/"+spuId);
	}

	function toUpdate(spuId){//RestFUL 风格
		$("#workArea").load("./spu/toUpdate/"+spuId);//spu/toUpdate/3
	}

	//跳转到添加页面
	function toAdd(){
		$("#workArea").load("./spu/toAdd");
	}

/* 	function del(id){
		var ids = new Array();
		ids.push(id);
		$.post("./spu/delBatch",{"ids":ids},function(resp){
			if(resp){
				alert("success!!")
				goPage(1);
			}else{
				alert("fail!!!")
			}
		})
	}

	//批量删除的函数
	function delBatch(){
		var ids = new Array();
		//获取选中复选框的值
		$(".chkb:checked").each(function(i,obj){
			//obj是js对象,还是jquery对象?
			var id = $(obj).val();
			ids.push(id);//把id放入数组
		})
		if(ids.length==0){
			alert("请先选中")
		}else{
			$.post("./spu/delBatch",{"ids":ids},function(resp){
				if(resp){
					alert("success!!")
					goPage(1);
				}else{
					alert("fail!!!")
				}
			})
		}
		
	} */
	function search() {
		$("#workArea").load("./spu/list", $("#searchForm").serialize());
	}

	function goPage(pageNum) {
		$("#workArea").load("./spu/list?pageNum=" + pageNum,$("#searchForm").serialize());
	}
	

	function del(id){
			var ids = new Array(id+"");
			if(confirm("确认删除该商品嘛？")){
				$.post("./spu/delSpuById",{ids:ids},function(msg){
					if(msg){
						alert("删除成功！");
						$("#workArea").load("./spu/list");
					}else {
						alert("删除失败！");
					}
				})
			}
		}
		function delBatch(){
			var ids = $(".cho:checked").map(function(){
				return this.value;
			}).get();
			if(confirm("确认删除该商品嘛？")){
				$.post("./spu/delSpuById",{ids:ids},function(msg){
					if(msg){
						alert("删除成功！");
						$("#workArea").load("./spu/list");
					}else {
						alert("删除失败！");
					}
				})
			}
		}
</script>
</html>